<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image approximation using PSO</title>
<script language="javascript1.7" type="text/javascript" src="pso.js"></script>
<script language="javascript" type="text/javascript">

var ctx;
var image_data;
var timer;
var fitness = 0;
var iteration = 0;
var mutations = 0;
var score;

function run()
{
    update_pso(ctx);
    fitness = eval_pso(ctx,image_data);
    if (score)
        score.innerHTML = fitness + "<br/>" + getWeight() + "<br/>" + mutations + "<br/>" + iteration;
    iteration++;
    timer = setTimeout(run, 10);
}

function init()
{
    var img = document.getElementById("image_pso_image");
    var canvas = document.getElementById("image_pso_canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    ctx = canvas.getContext("2d");
    ctx.drawImage(img,0,0);
    try
    {
        image_data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    }
    catch(e)
    {
        try
        {
            netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
        }
        catch(ev){}
        image_data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    }
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    score = document.getElementById("score");
    init_pso(ctx);
}

function toggle()
{
    if (timer)
    {
        clearTimeout(timer);
    }
    else
    {
        setTimeout(run,10);
    }
}

</script>
</head>
<body onload="init();">
<img id="image_pso_image" src="canvas.png" />
<canvas id="image_pso_canvas"></canvas><br />
<button onclick="toggle();">Start/Stop</button><br />
<div id="score"></div>
</body>
</html>